<template>
  <div>
    <span>选择商品分类</span>
    <el-cascader
      class="demonstration"
      v-model="paramsId"
      :options="categories"
      @change="getAttributeList"
      :props="{ value: 'cat_id', label: 'cat_name', expandTrigger: 'hover' }"
    ></el-cascader>
    <el-tabs v-model="activeName" @change="getAttributeList">
      <el-tab-pane
        v-for="(item, key) in tabs"
        :label="item.title1 + item.title"
        :name="key"
        :key="key"
      >
        <el-button
          size="mini"
          type="primary"
          :disabled="!catId"
          @click="
            form = {};
            $refs.d.show();
          "
          >添加{{ item.title }}</el-button
        >
        <MyTable
          rowkey="cat_id"
          :cols="cols"
          :loading="queryloading"
          :data="list"
        >
          <template v-slot:action="{ row }">
            <el-button size="mini" type="primary">编辑</el-button>
            <el-button size="mini" type="danger">删除</el-button>
          </template>
        </MyTable>
      </el-tab-pane>
    </el-tabs>
    <DF
      lw="80px"
      :title="title + activeTab.title1 + activeTab.title"
      :opts="opts"
      v-model="form"
      ref="d"
      @confirm="confirm"
    />
  </div>
</template>

<script>
import {
  getParamsList,
  getAttributes,
  addAttributes,
  updateAttributes,
} from "api/goods";
export default {
  data() {
    return {
      /**
       * 模型
       */
      form: "",
      /**
       * 分类Id
       */
      paramsId: [],
      /**
       * 商品分类参数数据
       */
      categories: [],
      /**
       * 切换
       */
      activeName:"many",
      /**
       * 动态参数
       */
      tabs: {
        many: {
          title: "参数",
          title1: "动态",
        },
        only: {
          title: "属性",
          title1: "静态",
        },
      },
    };
  },

  mounted() {},
  methods: {
    /**
     * 点击事件
    /**/
    async confirm() {
      // console.log(this.);
      const d = this.$refs.d;
      try {
        d.start();
        await (this.form.attr_id ? updateAttributes : addAttributes)(
          this.catId,
          { ...this.form, attr_sel: this.activeName }
        );
        this.$m.success(this.title + "成功");
        this.getlist();
        d.hide();
      } catch (error) {}
      d.stop();
    },
    /*
     *商品分类
     */
    async getAttributeList() {
      try {
        if (!this.catId) {
          return this.list.splice(0, Infinity);
        }
        this.queryLoading = true;
        this.list = await getAttributes(this.catId, this.activeName);
      } catch (error) {}
      this.queryloading = false;
    },

    /**  获取fenlei参数
     */
    async getlist() {
      try {
        this.categories = await getParamsList();
      } catch (error) {}
    },
  },
  created() {
    this.getlist();
  },
  computed: {
    title() {
      return this.form.attr_id ? "修改" : "添加";
    },
    /**
     * 表单配置项
     */
    opts() {
      return {
        attr_name: {
          title: this.activeTab.title1 + this.activeTab.title,
          required: true,
          max: 20,
        },
      };
    },
    cols() {
      return [
        { title: "expand" },
        { title: "#", type: "index" },
        { title: this.activeTab.title + "名称", name: "attr_name" },
        { title: "操作", slot: "action", alingn: "center", width: 200 },
      ];
    },
    catId() {
      return this.paramsId.length < 3 ? undefined : this.paramsId.slice(-1)[0];
    },
    /**
     * 激活的标签
     */
    activeTab() {
      return this.tabs[this.activeName];
    },
  },
};
</script>

<style lang="scss">
.el-cascader-menu__list {
  height: 300px;
}
</style>
